<div class="wrapper">
    <link href="/styles/website/css/tabs.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/styles/website/js/tytabs.jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#tabsholder").tytabs({
                prefixtabs:"tabz",
                prefixcontent:"contentz",
                classcontent:"tabscontent",
                tabinit:"1",
                catchget:"tab2",
                fadespeed:"normal"
                });
    });
    </script>
    <link href="/styles/website/css/global.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/styles/website/js/news-hot.js"></script>
    <div id="tabsholder">
        <ul class="tabs">
            <li id="tabz1">Khoá học nổi bật</li>
            <li id="tabz2">Khoá học mới</li>
        </ul>
        <div class="contents marginbot">
            <div id="contentz1" class="tabscontent">
                <ul id="ticker_01" class="ticker">
                    {if $noibat}
                    {foreach $noibat as $row}
                    <li class="news_hot">
                        <a href="{Url::anchor("khoa-hoc/v{$row.id}/{String::toUrl($row.name)}")}"><img src="{$row.images}" alt="{$row.name}" style="width:135px" /></a>
                        <h4><a href="{Url::anchor("khoa-hoc/v{$row.id}/{String::toUrl($row.name)}")}">{$row.name}</a></h4>
                        {$row.content_short}
                    </li><!--news_hot-->
                    {/foreach}
                    {/if}
                </ul>
            </div><!--tabscontent-->
            <div id="contentz2" class="tabscontent">
                <ul id="ticker_02" class="ticker">
                    {if $khoahocmoi}
                    {foreach $khoahocmoi as $row}
                    <li class="news_hot">
                        <a href="{Url::anchor("khoa-hoc/v{$row.id}/{String::toUrl($row.name)}")}"><img src="{$row.images}" alt="{$row.name}" style="width:135px" /></a>
                        <h4><a href="{Url::anchor("khoa-hoc/v{$row.id}/{String::toUrl($row.name)}")}">{$row.name}</a></h4>
                        {$row.content_short}
                    </li><!--news_hot-->
                    {/foreach}
                    {/if}
                </ul>
            </div><!--tabscontent-->
        </div><!--contents-->
    </div><!--tabsholder2-->
</div><!--wrapper-->
<div class="search_center">
    <input type="text" class="txtsearch" />
    <label>Vị trí</label>
    <select class="slcsearch">
        <option value="">TP.HCM</option>
        <option value="">Hà Nội</option>
        <option value="">Vũng tàu</option>
        <option value="">Đà Nẵng</option>
        <option value="">Cần Thơ</option>
    </select>
    <label>Danh mục</label>
    <select class="slcsearch">
        <option value="">Khoá học ngoại ngữ</option>
        <option value="">Khoá học tin học</option>
        <option value="">Khoá học kỹ năng mềm</option>
        <option value="">Khoá học Anh văn</option>
        <option value="">Khoá học ăn và nhậu</option>
    </select>
    <input type="image" src="/styles/website/images/btn-search.gif" class="btnsearch" />
    <div class="clear"></div>
</div><!--search_center-->
{if isset($trangchu) && $trangchu neq null}
    {foreach $trangchu as $row}
    <div class="wrapper">
        <div class="news_post">
            <div class="down_pr">Giảm <br /><span>{$row.per}</span>%</div>
            <h4><a href="{Url::anchor("khoa-hoc/v{$row.id}/{String::toUrl($row.name)}")}">{$row.name}</a></h4>
            <div class="news_short">
                <a href="{Url::anchor("khoa-hoc/v{$row.id}/{String::toUrl($row.name)}")}"><img src="{$row.images}" width="200" height="135" alt="" /></a>
                {$row.content_short} 
            </div><!--news_short-->
        </div><!--news_post-->
        <div class="news_info">
            <h4>{$row.company}</h4>
            {$row.address}<br />
            {$row.phone}
        </div><!--news_info-->
        <div class="news_price begin">
            Giá: <span class="older">{$row.price}</span><br />
            <font style="font-size:14px;">Giá khuyến mãi: <strong>{$row.price_sale}</strong> VNĐ</font>
        </div><!--news_price-->
        <div class="news_price">
            Thời gian khuyến mãi: {$row.date_start|date_format:"%d/%m/%Y"} - {$row.date_end|date_format:"%d/%m/%Y"}<br />
            Đã có: <span>{$row.view}</span> người xem
        </div><!--news_price-->
        <div class="clear"></div>
    </div><!--wrapper-->
    {/foreach}
{else}
    <div class="wrapper" style="padding:20px 0" align="center">Đang cập nhật</div><!--wrapper-->
{/if}

{if isset($loader) && $loader neq null}
<div id="lstOneCat"></div><!--lstOneCat-->
<div id="uiMorePagerPrimary"> 
	<span id="seeMore">Click để xem thêm</span> <span id="loader"></span>
</div>
<script type="text/javascript">
var newscat_id=9;
var num=1;
$('#uiMorePagerPrimary').live('click',function(){
	
	if(num<5){
		num++;
		$(this).find('span#seeMore').fadeOut();
		$(this).find('span#loader').fadeIn(function(){
			$(this).css('display','block');
		});
		var adata = {
			"newscat_id" : newscat_id,
			"num":num
		};
		$.ajax({
			type: "POST",
			url: '{Url::anchor("home/load")}',
			data: adata,
			dataType: "html",
			success: function(html){
					$('#lstOneCat').html(html);
					$('span#loader').fadeOut();
					$('span#seeMore').fadeIn(function(){
						$(this).css('display','block');
					});
			}
		});
	}
});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.contain').append('<div id="top" title="Lên Đầu Trang">Back to Top</div>');
	   $(window).scroll(function() {
			if($(window).scrollTop() != 0) {
				$('#top').fadeIn();
				if($(window).scrollTop() >= $('.adv_left').position().top){
					$('.adv_left_sub').addClass('fixed_pos').css('top', '0px').css('width', '220px');
				}else{
					$('.adv_left_sub').removeClass('fixed_pos');
				}
			} else {
				$('#top').fadeOut();
			}
			
	   });
	   $('#top').click(function() {
		$('html, body').animate({ scrollTop:0 },500);
	   });
	});
</script>
{/if}
